<!--纯净模式-->
<router-outlet *ngIf="global.params.dashboardMode!=='full'; else elseBlock"></router-outlet>
<!--附带菜单与顶部-->
<ng-template #elseBlock>
    <div class="d-flex" style="height:100vh;overflow: hidden;">
        <!-- 左侧菜单 -->
        <div [class.menu-container-sm]="global.params.menuMode==='small'" class="menu-container flex-shrink-0 h-100 d-flex flex-column">
            <div class="d-flex align-items-center justify-content-center bg-white flex-shrink-0" style="height: 60px;overflow: hidden;border-bottom:1px solid rgba(200, 200, 200,.3);">
                <img [src]="menuConfig.SMALL_LOGO" width="30">
                <h4 *ngIf="global.params.menuMode==='full'" class="m-0">卖货郎管理系统</h4>
                <!-- <img *ngIf="global.params.menuMode==='full'" [src]="menuConfig.FULL_LOGO" alt="TOOLSUI" height="40"> -->
                <!-- <img [src]="global.params.menuMode==='small'?menuConfig.SMALL_LOGO:menuConfig.FULL_LOGO" alt="TOOLSUI" height="40"> -->
            </div>
            <app-menu class="flex-grow-1 shadow-sm" [menuConfig]="menuConfig" [autoClose]="true" [menuMode]="global.params.menuMode" [items]="menus" [useImage]="true"></app-menu>
        </div>
        <!-- 右侧内容 -->
        <div class="flex-grow-1 h-100 d-flex flex-column" style="width:100%;overflow: hidden;">
            <!-- 顶部工具栏 -->
            <div class="headbar bg-{{global.params.color}} no-select text-light d-flex align-items-center justify-content-between flex-shrink-0 shadow-sm" style="height:60px;z-index:1;">
                <div class="d-flex align-items-center flex-grow-1 h-100">
                    <div class="d-flex align-items-center bg-light-hover h-100 pl-3 pr-3">
                        <i (click)="changeMenuMode()" class="iconfont icon-category pointer"></i>
                    </div>
                </div>
                <div class="flex-shrink-0 d-flex align-items-center h-100">
                    <div class="h-100 d-flex">
                        <div class="d-flex align-items-center bg-light-hover h-100 pl-3 pr-3">
                            <i class="iconfont icon-remind pointer"></i>
                        </div>
                        <div class="d-flex align-items-center bg-light-hover h-100 pl-3 pr-3">
                            <i class="iconfont icon-comments pointer"></i>
                        </div>
                    </div>
                    <div tsDropdown class="bg-light-hover h-100 d-flex align-items-center pointer">
                        <img tsToggle [src]="auth.user.avatar" dataSrc="assets/images/avatar/0.jpg" class="rounded-circle border border-light ml-3 mr-3" height="35" width="35" alt="avatar">
                        <div tsDropMenu [offsetX]="-100" [offsetY]="28" style="width:163px;">
                            <div class="dropdown-item-title">{{auth.user?.role.roleName}}</div>
                            <button class="dropdown-item pointer">
                                <span class="iconfont icon-mobile mr-2"></span>
                                <span>{{auth.user.account}}</span>
                            </button>
                            <button routerLink="/system/detail" class="dropdown-item pointer">
                                <span class="iconfont icon-account mr-2"></span>
                                <span i18n>账号信息</span>
                            </button>
                            <button class="dropdown-item pointer">
                                <span class="iconfont icon-set mr-2"></span>
                                <span i18n>系统设置</span>
                            </button>
                            <div class="dropdown-divider"></div>
                            <button (click)="setOut()" class="dropdown-item pointer">
                                <span class="iconfont icon-out mr-2"></span>
                                <i tsIcon="out"></i>
                                <span i18n>退出</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主体内容 -->
            <div class="flex-grow-1 bg-light w-100 h-100" style="overflow:auto;">
                <div *ngIf="global.params.lazyload" class="h-100 w-100 bg-white d-flex align-items-center">
                    <div class="dot-animate m-auto"></div>
                </div>
                <div *ngIf="!global.params.lazyload" class="h-100 d-flex flex-column">
                    <div class="flex-grow-1" style="overflow: auto">
                        <div class="breadcrumb bg-white pl-3 pr-3">
                            <a routerLink="/">
                                <i class="iconfont icon-homepagenormal"></i>
                                <span>首页</span>
                            </a>
                            <a *ngFor="let breadcrumb of breadcrumbs" [routerLink]="breadcrumb.path" class="mr-2" class="ml-2">
                                <span>{{breadcrumb.title}}</span>
                            </a>
                        </div>
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>